<template>
      <div>
      <el-button type="success" @click="addEquipment">新增</el-button>
        <el-table
      :data="playlist"
        border
        style="width: 100%">
          <el-table-column
        prop="id"
        label="id"
        width="120">
          </el-table-column>
          <el-table-column
        prop="p_name"
        label="姓名"
        width="120">
          </el-table-column>
          <el-table-column
        prop="email"
        label="邮件"
        width="120">
          </el-table-column>
          <el-table-column
        prop="age"
        label="年龄"
        width="120">
          </el-table-column>
          <el-table-column
        prop="性别"
        label="地址"
        width="300">
          </el-table-column>
          <el-table-column
        prop="balance"
        label="余额"
        width="120">
          </el-table-column>
          <el-table-column
        prop="phone"
        label="联系方式"
        width="120">
          </el-table-column>
          <el-table-column
        prop="password"
        label="密码"
        width="120">
          </el-table-column>
          <el-table-column

        prop="pic"
        label="图片"
        width="150">
          <template slot-scope="scope">
          <el-image
        style="width: 100px; height: 100px"
      :src="scope.row.pic"
        fit="cover"></el-image>
          </template>
          </el-table-column>
          <el-table-column

        label="操作"
        width="200">
          <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
          <el-button  @click.native.prevent="deleteRow(scope.$index,playlist,scope.row)" type="text" size="small">删除</el-button>
          </template>
          </el-table-column>
          </el-table>
          <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-sizes="[1,5,10,20]"
      :page-size="params.size"
        layout="total, sizes, prev, pager, next, jumper"
      :total="total">
          </el-pagination>

          <div>
          <el-dialog :title="dialogStatus" :visible.sync="dialogFormVisible">
          <el-form :model="play">
          <el-form-item v-show="false" label="id" :label-width="formLabelWidth" >
          <el-input v-model="play.id" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="play.p_name"></el-input>
          </el-form-item>
          <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="play.password" ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="play.email"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="play.gender"></el-input>
          </el-form-item>
          <el-form-item label="余额" :label-width="formLabelWidth">
          <el-input v-model="play.balance"></el-input>
          </el-form-item>
          <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="play.phone" ></el-input>
          </el-form-item>
          <el-form-item label="个人相片" :label-width="formLabelWidth">
          <el-upload
      class="upload-pic"
      :action="domain"
      :data="QiniuData"
      :on-remove="handleRemove"
      :on-error="uploadError"
      :on-success="uploadSuccess"
      :before-remove="beforeRemove"
      :before-upload="beforeAvatarUpload"
      :limit="4"
        multiple
          :on-exceed="handleExceed"
      :file-list="fileList"
        list-type="picture"
          >
          <el-button size="small" type="primary">选择图片</el-button>
          </el-upload>
          <div>
          <img class="pic-box" :src="uploadPicUrl" v-if="uploadPicUrl">
          </div>
          </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
        </div>
        </el-dialog>
        </div>
        </div>

        </template>

        <script>
        import axios from 'axios'
        //import { Message } from 'element-ui'

        export default {
          name: "",
          data() {
            return {
              dialogStatus:'',
              playlist: []
              ,
              params: {
                page: 1,
                size: 5
              },
              total: 100,
              dialogFormVisible: false,
              play: {
                p_name:'',
                password:'',
                email:'',
                balance:'',
                gender:'',
                pic:'',
                phone:'',

              },
              formLabelWidth: '120px'
              ,
              loading: false,
              QiniuData: {
                //key: '' ,//图片名字处理
                token: "",//七牛云token
                data: {}
              },
              domain: "http://upload-z1.qiniup.com", // 七牛云的上传地址（华东区）
              qiniuaddr: "http://qo24mi78y.hb-bkt.clouddn.com", // 七牛云的图片外链地址 七牛云空间的外链地址
              uploadPicUrl: "", //提交到后台图片地址
              fileList: [],
              page:1,
              size:5
            }
          },
          methods: {
            deleteRow(index, rows,row) {


              this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                axios.post("api/play/delete",{"id":row.id}).then(res=>{
                  rows.splice(index, 1);
                  console.log("del");
                })
                //axios.delete()
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                });
              });



            },
            submit() {
              if (this.fileList.length > 0) {
                for (var i = 0; i < this.fileList.length; i++) {

                  if (i == 0) {
                    this.play.pic = this.fileList[i].url;
                  }
                  if (i == 1) {
                    this.play.pic1 = this.fileList[i].url;
                  }
                  if (i == 2) {
                    this.play.pic2 = this.fileList[i].url;
                  }
                  if (i == 3) {
                    this.play.pic3 = this.fileList[i].url;
                  }

                }
              }
              axios.post("api/play/add", this.play).then(res => {
                if (res.data.code == 200) {
                  this.$message(res.data.mgs);
                  this.dialogFormVisible = false;
                }
              })
            },
            findall(page,size) {
              axios.post("api/play/findall",{page:page,size:size}).then(res => {

                this.playlist = res.data.data;
                this.total=res.data.total;
              })
            },
            handleClick(row) {
              console.log(row);
              this.dialogFormVisible = true;
              //编辑弹框标题
              this.play.id=row.id;
              this.play.p_name=row.p_name;
              this.play.p_name=row.p_name;
              this.play.age=row.age;
              this.play.email=row.email;
              this.play.gender=row.gender;
              this.play.password=row.password;
              this.play.balance=row.balance;
              this.play.phone=row.phone;
              this.dialogStatus = "修改"
            },
            handleSizeChange(val) {
              console.log(val);
              this.size=val;
              this.findall(this.page,val)

            },
            handleCurrentChange(val) {
              this.page=val;
              this.findall(val,this.size);
            },
            addEquipment() {
              //显示弹框
              this.dialogFormVisible = true;
              //新增弹框标题
              this.dialogStatus = "新增";
            },
            //编辑
            handelEdit() {
        //显示弹框
        this.dialogFormVisible = true;
        //编辑弹框标题
        this.dialogStatus = "editEquipent"
      },
      handleRemove(file, fileList) {
        this.uploadPicUrl = "";
      },
      handleExceed(files, fileList) {
        this.$message.warning(
          `当前限制选择 4 张图片，如需更换，请删除上一张图片在重新选择！`
        );
      },
      beforeAvatarUpload(file,response) {   //图片上传之前的方法
        // const isPNG = file.type === "image/png";
        // const isJPEG = file.type === "image/jpeg";
        // const isJPG = file.type === "image/jpg";
        // const isLt2M = file.size / 1024 / 1024 < 2;

        // if (!isPNG && !isJPEG && !isJPG) {
        //   this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");
        //   return false;
        // }
        // if (!isLt2M) {
        //   this.$message.error("上传头像图片大小不能超过 2MB!");
        //   return false;
        // }
        this.QiniuData.data = file;
        //this.QiniuData.key = `${file.name}`;
        console.log(this.QiniuData.key)
      },
      uploadSuccess(response, file, fileList) {  //图片上传成功的方法
        //console.log(fileList);
        //console.log(response);
        //console.log(file);
        this.uploadPicUrl = `${this.qiniuaddr}/${response.key}`;
        //console.log(this.uploadPicUrl);
        this.fileList.push({url:this.uploadPicUrl});
        //console.log(this.fileList[0].url+"dddddddddddddd");
      },
      uploadError(err, file, fileList) {    //图片上传失败时调用
        this.$message({
          message: "上传出错，请重试！",
          type: "error",
          center: true
        });
      },
      beforeRemove(file, fileList) {
        // return this.$confirm(`确定移除 ${ file.name }？`);
      },
      //提交数据到后台
      handleSubmit() {

      },
      //请求后台拿七牛云token
      getQiniuToken() {  //token
        axios.get("api/play/gettoken").then(res=>{
          this.QiniuData.token=res.data.data;
        })
        //console.log(uploadtoken);
        //this.QiniuData.token= uploadtoken.data.token
      }
    },
    mounted() {
      this.findall(this.page,this.size);
      this.getQiniuToken();

    }
  }
</script>

<style scoped>

</style>
